<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="110px"
    >
      <el-form-item label="产品编号" prop="productNumber">
        <el-input
          v-model="queryParams.productNumber"
          placeholder="请输入产品编号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="产品名称" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入产品名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="产品图号" prop="drawingNumber">
        <el-input
          v-model="queryParams.drawingNumber"
          placeholder="请输入产品图号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="产品规格" prop="productStandard">
        <el-input
          v-model="queryParams.productStandard"
          placeholder="请输入产品规格"
          clearable
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="setSearchParams(queryParams)">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <div class="btnWrap">
      <div>
        <el-button
          type="primary"
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['config:material-collect:export']"
          >数据导出
        </el-button>
      </div>
      <div>
        <el-button type="primary" @click="openTableTitleSet">表头设置 </el-button>
      </div>
    </div>
    <Table
      :columns="tableTitleList"
      :selection="tableObject.tableList.length ? true : false"
      :data="tableObject.tableList"
      :loading="tableObject.loading"
      :pagination="{
        total: tableObject.total
      }"
      v-model:pageSize="tableObject.pageSize"
      v-model:currentPage="tableObject.currentPage"
      @select="selectionChange"
      @register="register"
      :tableHeight="tableHeight"
    >
      <template #action="{ row }">
        <el-button link type="primary" v-hasPermi="['config:manufacturingPartsListTask:edit']" @click="edit(row)" v-if="row.dictStatus != 30">
          编辑
        </el-button>
        <el-button link type="primary" @click="change(row)" v-hasPermi="['config:manufacturingPartsListTask:change']" v-if="row.taskType == 20">
          变更
        </el-button>
        <el-button link type="primary" @click="openForm(row)" > 查看 </el-button>
      </template>
    </Table>
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <!-- <ManufacturingPartsListTaskForm ref="formRef" @success="getList" /> -->
  <!-- 表头设置 -->
  <table-width-set ref="tableTitleSet" @refresh="getTableTitle" />
  <!-- 导出 -->
  <ExportFile ref="exportRef" @download="downloadFun" />
</template>

<script setup lang="ts" name="ManufacturingPartsListTask">
  import download from '@/utils/download'
  import * as ManufacturingPartsListTaskApi from '@/api/config/manufacturingPartsListTask'
  // import ManufacturingPartsListTaskForm from './ManufacturingPartsListTaskForm.vue'
  import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
  const { push } = useRouter()
  const tableTitleList = ref<CrudSchema[]>([]) // 表头列表
  const code = 'ManufacturingPartsListTask' //表头名
  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    taskNumber: null,
    completionOrChangeNumber: null,
    productNumber: null,
    productName: null,
    drawingNumber: null,
    productStandard: null,
    partName: null,
    taskType: null,
    status: null,
    version: null,
    activeData: [],
    stopData: [],
    userNickName: null,
    createTime: []
  })
  const queryFormRef = ref() // 搜索的表单
  const exportLoading = ref(false) // 导出的加载中
  // tableObject：表格的属性对象，可获得分页大小、条数等属性
  // tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
  const { tableObject, tableMethods } = useTable({
    getListApi: ManufacturingPartsListTaskApi.getManufacturingPartsListTaskPage, // 分页接口
    defaultParams: queryParams
  })
  const parentRef = ref()
  // 获取table组件
  const register = (parent: any) => {
    parentRef.value = parent
  }
  // 获得表格的各种操作
  const { getList, setSearchParams } = tableMethods
  // 获取表头
  const getTableTitle = async () => {
    const res = await ManufacturingPartsListTaskApi.getManufacturingPartsListTaskPage(queryParams)
    res.labels.push({
      field: 'action',
      label: '操作',
      align: 'left',
      headerAlign: 'left',
      width: 150
    })
    const { allSchemas } = useCrudSchemas(res.labels)
    tableTitleList.value = allSchemas.tableColumns
  }

  // 打开表头设置
  const tableTitleSet = ref()
  const openTableTitleSet = () => {
    tableTitleSet.value.open(tableTitleList.value, code)
  }
  // 多选
  const multipleSelection = ref([])
  const selectionChange = (val) => {
    multipleSelection.value = val
  }

  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.pageNo = 1
    setSearchParams(queryParams)
  }

  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
  }

  /**编辑 */
  const edit = (row) => {
    push(
      `/config/config/materiel/manufacturingPartsListTaskEdit?id=${row.id}&productNumber=${row.productNumber}&productName=${row.productName}&drawingNumber=${row.drawingNumber}&productStandard=${row.productStandard}&version=${row.version}`
    )
  }
  /**变更 */
  const change = (row) => {
    push(
      `/config/config/materiel/manufacturingPartsListTaskChange?id=${row.id}&productNumber=${row.productNumber}&productName=${row.productName}&drawingNumber=${row.drawingNumber}&productStandard=${row.productStandard}&version=${row.version}`
    )
  }

  /** 查看 */
  const openForm = (row) => {
    push(
      `/config/config/materiel/manufacturingPartsListTaskDetail?id=${row.id}&productNumber=${row.productNumber}&productName=${row.productName}&drawingNumber=${row.drawingNumber}&productStandard=${row.productStandard}&version=${row.version}`
    )
  }
  /** 导出按钮操作 */
  const exportRef = ref()
  const handleExport = async () => {
    exportRef.value.open()
  }
  // 下载
  const downloadFun = async () => {
    const val = exportRef.value.params
    let params = {
      fileName: val.name,
      ids: ''
    }
    if (val.range === 'all') {
      params.ids = ''
    } else {
      multipleSelection.value.map((item) => {
        params.ids = (item as any).id + ',' + params.ids
      })
    }
    const data = await ManufacturingPartsListTaskApi.exportManufacturingPartsListTask(params)
    download.excel(data, val.name)
    parentRef.value.clearTableSelect()
  }
  /** 初始化 **/
  const tableHeight = ref(0)

  onMounted(async () => {
    const queryParamsHeight = queryFormRef.value.$el.clientHeight + 2
     tableHeight.value = document.body.clientHeight - 132 - queryParamsHeight - 127
    getList()
    getTableTitle()
  })
</script>
<style lang="scss" scoped>
  .btnWrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 50px;
  }
</style>
